<script setup lang='ts'>
  import { reactive } from 'vue';
  import { oss_url } from '@/pinia/getter'
  import xmUpload from '@/components/Upload/xm-upload.vue';
  const form = reactive({
    title: '',
    image: '',
    url: '',
    type: '',
    weizhi:'',
  })
  const httpurladd = ()=>{
    let { weizhi, image, title } = form
    image = image.replace('/ad/image/platform/','')
    title = encodeURI(form.title)
    let url = `${oss_url.value}/ad/index.html?img=${image}&title=${title}`
    if(weizhi == 'banner') {
      form.url = url
    }
    if(weizhi == '弹框') {
      url = encodeURIComponent(`${oss_url.value}/ad/index.html?title=` + title)
      form.url = `kkaudio://web?url=${url}&type=${form.type}`
    }
  }
</script>

<template>
  <div class="xm-content">
    <el-form ref="ruleForm" :model="form" status-icon label-width="100px" class="demo-ruleForm">
      <el-form-item label="标题">
        <el-input v-model="form.title" type="text" @input="httpurladd" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="type值">
        <el-input v-model="form.type" type="text" @input="httpurladd" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="显示位置">
        <el-select
          v-model="form.weizhi"
          style="width: 100%;"
          @change="httpurladd()"
        >
          <el-option label="banner" value="banner"/>
          <el-option label="弹框" value="弹框"/>
        </el-select>
      </el-form-item>
      <el-form-item label="图片URL">
        <el-input v-model="form.image" type="text" readonly="readonly"/>
      </el-form-item>
      <el-form-item label="最终URL">
        <el-input
        v-model="form.url"
        type="textarea"
        readonly="readonly"
        :autosize="{ minRows: 2, maxRows: 6 }"/>
      </el-form-item>
      <el-form-item label="上传" class="ff">
        <xmUpload :data="{ type: 5 }" v-model:file-url="form.image" @success="httpurladd" />
        <!-- <template v-else>
          <el-button size="small" type="primary" @click="handleRemoveimg" >删除</el-button>
          <div class="demo-image__preview">
            <el-image 
              style="width: 300px;"
              :src="oss_url + form.image" 
              :preview-src-list="[oss_url + form.image]">
            </el-image>
          </div>
        </template> -->
        <!-- <el-upload
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :action="update_url"
          :data="imgType"
          class="avatar-uploader">
          <div v-if="form.image" class="avatar-wrapper">
            <img :src="oss_url + form.image" class="avatar" width="100%">
          </div>
          <i v-else class="el-icon-plus avatar-uploader-icon"/>
        </el-upload> -->
      </el-form-item>
    </el-form>
  </div>
</template>